<template>
    <view class="main">
        <view class="box dispaly-align-center">
            <view class="code dispaly-align-center" @click="upload" v-if="!formData.wxQr">
                <view class="dispaly-col-center">
                    <view class="icon">
                        <image src="/static/mine/j.png" mode="aspectFill" />
                    </view>
                    <view class="text">上传微信收款码</view>
                </view>
            </view>
            <view class="code dispaly-align-center" @click="upload" v-else>
                <image class="code-img" :src="formData.wxQr" mode="aspectFill" />
            </view>
        </view>
    </view>
    <view class="btn-box dispaly-align-center ">
        <view class="btn dispaly-align-center " @click="submit">提交</view>
    </view>
</template>

<script setup>
import { reactive, ref } from 'vue';
import { updateUser } from '@/api/apiList';
import { onLoad } from '@dcloudio/uni-app';
import { dUpload } from '@/utils/util';
import { getUserInfo } from '@/api/apiList';

const userInfo = ref({})
const getUser = async () => {
    const res = await getUserInfo({ userId: '' })
    if (res.code == 200) {
        userInfo.value = res.data
        formData.wxQr = userInfo.value.wxQr
    }
}

onLoad(() => {
    getUser()
})

const formData = reactive({
    wxQr: '',
    userId: ''
});
const upload = async () => {
    const res = await dUpload();
    formData.wxQr = res;
};

const submit = async () => {
    uni.showLoading({
        title: '保存中'
    })
    formData.userId = userInfo.value.userId
    const res = await updateUser(formData)
    if (res.code == 200) {
        uni.hideLoading()
        uni.showToast({
            title: '修改成功',
            icon: 'none'
        })
        setTimeout(() => {
            uni.navigateBack()
        }, 1500)
    }
}

</script>
<style lang="scss" scoped>
.btn-box {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: #fff;
    padding: 20rpx 0 88rpx 0;

    .btn {
        width: 654rpx;
        height: 88rpx;
        background: #FB4E47;
        border-radius: 44rpx;
        font-family: PingFang-SC, PingFang-SC;
        font-weight: bold;
        font-size: 34rpx;
        color: #FFFFFF;
    }
}

.main {
    padding-top: 30rpx;

    .box {
        background-color: #fff;
        padding: 30rpx 0;

        .code {
            width: 400rpx;
            height: 258rpx;
            background: #F8F8F8;
            border-radius: 8rpx;
            border: 2rpx solid #DDDDDD;

            .code-img {
                width: 400rpx;
                height: 258rpx;
            }

            .icon {
                margin-bottom: 40rpx;

                image {
                    width: 41rpx;
                    height: 41rpx;
                }
            }

            .text {
                font-family: PingFang-SC, PingFang-SC;
                font-weight: 500;
                font-size: 30rpx;
                color: #555555;
            }
        }
    }
}
</style>